<template>
  <!-- 页面-角色管理-分配应用 -->
  <div style="height: 330px;">
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form :model="roleForm" slot="adaption-bar" label-position="top" class="ivu-form-no-margin-bottom" inline>
        <!-- 角色编码 -->
        <Form-item prop="roleCode" :label="$t('module.role.roleCode')">
          <Input type="text" :maxlength="30" v-model="roleForm.roleCode" disabled ></Input>
        </Form-item>
        <!-- 角色名称 -->
        <Form-item prop="roleName" :label="$t('module.role.roleName')">
          <Input type="text" :maxlength="30" v-model="roleForm.roleName" disabled ></Input>
        </Form-item>
      </Form>
    </SelfAdaption>
    <!-- 分配应用 -->
    <allot-app :roleId="this.roleId" @handleAllotApp="getSelectAllotApp" @getSelectDefaultApp="getSelectDefaultApp" />
  </div>
</template>
<script>
import AllotApp from "./AllotApp.vue";
import { saveAssignedApp } from "@/api/roleApi.js";
import locales from "./locales.js";

export default {
  mixins: [locales],
  props: {
    roleId: {
      type: String,
      default() {
        return "";
      }
    },
    roleName: {
      type: String,
      default() {
        return "";
      }
    },
    roleCode: {
      type: String,
      default() {
        return "";
      }
    },
    appId: {
      type: String,
      default() {
        return "";
      }
    },
    tenantCode: {
      type: String,
      required: true
    },
    enabled: {
      type: Number,
      default() {
        return "";
      }
    }
  },
  components: {
    AllotApp
  },
  data() {
    return {
      tableData: [],
      roleForm: {
        roleName: this.roleName,
        roleCode: this.roleCode
      },
      fromAppIdList: [], //选中应用,
      cancelSelectApp: [], // 取消选中的数据
      // 保存初始数据
      initData: {
        applicationCodes: []
      },
      actions: [
        {
          text: this.$t("common.save"),
          theme: "primary",
          handle: () => {
            // this.actions[0].loading = true;
            this.save();
          },
          loading: false
        },
        {
          text: this.$t("common.close"),
          handle: () => {
            this.$emit("Close");
          }
        }
      ]
    };
  },
  created: function () {
    this.$emit("SetTitle", this.$t("module.role.assignApp"));
    this.$emit("SetPageWidth", 706);
    this.$emit("SetPageActions", this.actions);
  },
  methods: {
    getSelectDefaultApp(selection) {
      this.fromAppIdList = selection
    },
    // // 添加
    // add() {
    //   new this.$pageModal(
    //     RoleSelectApp,
    //     {
    //       props: { roleId: this.roleId, tenantCode: this.tenantCode }
    //     },
    //     data => {
    //       if (data && data.length > 0) {
    //         // let assignedApps = this.$refs["appTable"].tableData;
    //         let assignedApps = this.tableData.records;
    //         let unassignedApps = data.filter(app => {
    //           // 去掉重复数据
    //           for (let index = 0; index < assignedApps.length; index++) {
    //             if (assignedApps[index].fromAppId == app.clientId) {
    //               return false;
    //             }
    //           }
    //           // 选择应用和已分配应用模型不一致
    //           app.fromAppId = app.clientId;
    //           return true;
    //         });
    //         // this.$refs["appTable"].tableData = this.$refs["appTable"].tableData.concat(unassignedApps);
    //         this.tableData.records = this.tableData.records.concat(unassignedApps);
    //       }
    //     }
    //   );
    // },
    // 删除
    // deleted() {
    //   let selectedRows = this.$refs["appTable"].getSelectioned();
    //   if(!selectedRows) {
    //     this.$message.error({
    //       content: this.$t("common.warning.selctElement"),
    //       duration: 3
    //     });
    //     return
    //   }else {
    //     this.$confirm
    //       .warning(this.$t('common.warning.confirmToDelete'))
    //       .then(() => {
    //         this.removeRow(selectedRows);
    //       })
    //       .catch(_ => _);
    //   }
    // },
    // removeRow(selectedRows) {
    //   selectedRows.forEach(app => {
    //     // let allRows = this.$refs["appTable"].tableData;
    //     let allRows = this.tableData.records;
    //     for (let index = 0; index < allRows.length; index++) {
    //       const row = allRows[index];
    //       if (app.id == row.id) {
    //         // 从列表删除选中行
    //         // this.$refs["appTable"].tableData.splice(index, 1);
    //         this.tableData.records.splice(index, 1);
    //         continue;
    //       }
    //     }
    //   });
    // },
    getSelectAllotApp(selection, appLication, initData, isSearch) {
      // appLication为表格展示的应用(全部应用或搜索的部分应用)，selection为选中应用，initData为最初始获取的所有应用
      // 获取初始数据选中的应用编码
      this.initData.applicationCodes = [];
      
      initData.map(item => {
        if (item._checked) {
          this.initData.applicationCodes.push(item.fromAppId);
        }
      });
      // this.fromAppIdList = selection;
      // 取消选中的数据（包括有效无效）
      let allCancelSelectApp = [];
      // 取消选中的数据（只包括有效）
      this.cancelSelectApp = [];
      appLication.filter(item => {
        // 初始应用中的选中的应用
        if (item._checked) {
          // 选中应用在初始应用中未存在，则代表应用已被取消，并且该取消的应用为有效应用
          // if (selection.indexOf(item.fromAppId) == -1 && item.appEnabled == 1) {
          //   this.cancelSelectApp.push(item);
          // }
          if (selection.indexOf(item.fromAppId) == -1) {
            allCancelSelectApp.push(item.fromAppId);
            if (item.appEnabled == 1) {
              this.cancelSelectApp.push(item);
            }
          }
        }
      });
      // 标识当前是否是搜索查询：如果是搜索查询才调用此方法去处理“查询的数据进行取消或新增时，原来选择的数据会被置空”问题
      if (isSearch) {
        // 参数1为选中数据，参数2为取消的数据
        this.cancelOrAdd(selection, allCancelSelectApp);
      } else {
        // console.log(selection)
        this.fromAppIdList = selection;
      }
    },
    // 当针对查询的数据进行取消或新增时，原来选择的数据会被置空，因此把新数据与原数据进行合并去重处理
    cancelOrAdd(selection, allCancelSelectApp) {
      // 原来的选中数据
      let applicationCodes = this.initData.applicationCodes;
      // 如存在新增数据
      if (selection.length != 0) {
        let data = applicationCodes.concat(selection);
        applicationCodes = Array.from(new Set(data));
      }
      // 如存在取消数据
      if (allCancelSelectApp.length != 0) {
        applicationCodes.map((item, index) => {
          if (allCancelSelectApp.indexOf(item) != -1) {
            applicationCodes.splice(index, 1);
          }
        });
      }
      this.fromAppIdList = applicationCodes;
    },
    
    // 保存
    save() {
      this.actions[0].loading = true
      // 初始状态为有效
      if (this.enabled == 1) {
        let warningText;
        if (this.cancelSelectApp.length != 0) {
          // 取消分配的有效应用的提示
          let cancelApp = [];
          this.cancelSelectApp.map(item => {
            cancelApp.push(item.appName);
          });
          warningText = this.$t("module.role.warning.cancelApp") + "\n" + "[" + cancelApp + "]";
        }
        if (warningText) {
          // 删除提示级别：严重
          this.$confirm
            .swarning(warningText)
            .then(() => {
              this.saveAssignedApp();
            })
            .catch(() => {
              this.actions[0].loading = false;
            });
        } else {
          this.saveAssignedApp();
        }
      } else {
        this.saveAssignedApp();
      }
    },

    // 保存分配应用
    saveAssignedApp() {
      let params = {
        roleId: this.roleId,
        toAppId: this.appId,
        fromAppIdList: this.fromAppIdList
      };
      // $store
      //   .dispatch("SaveAssignedApp", params)
      saveAssignedApp(params)
        .then(response => {
          this.$message.success({
            content: this.$t("module.role.appSuccess"),
            duration: 3
          });
          this.$emit("Close");
        })
        .catch(data => {
          this.$message.error({
            content: data.message,
            duration: 3
          });
          this.actions[0].loading = false;
        });
    }
  },
  watch: {},
  directives: {}
};
</script>
